<template>
    <div class="outdiv">
        <cli-title class="titleClass" :pageIndex="pageIndex"></cli-title>
        <el-card class="card">
            <el-table
                    :data="tableData"
                    stripe
                    highlight-current-row
                    @current-change="handleCurrentChange"
                    style="width: 100%;"
                    :default-sort = "{prop: 'date', order: 'descending'}"
            >
                <el-table-column
                        prop="imgid"
                        label="图片ID"
                        sortable
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="日期"
                        sortable
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="time"
                        label="时间"
                        >
                </el-table-column>
                <el-table-column
                        prop="tag"
                        label="标签"
                        width="80">
                </el-table-column>

                <el-table-column
                        label="来自相机"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)"  size="small">{{scope.row.cameraid}}</el-button>
                    </template>
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="wkk"  size="small">查看图片</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card class="img-card">
            <div class="block">
            <el-image :src="src"></el-image>
            </div>
        </el-card>




    </div>
</template>

<script>
    import cliTitle from '~/components/base/cliTitle.vue'
    import Foreign_list from "../../components/foreign/foreign_list";
    import API from "../../api";
    import API_PRO from "../../api/API_PRO";
    export default {
        name: "index",
        components: {Foreign_list, cliTitle},
        data(){
            return{
                baseURL:API_PRO.baseURL,
                tableData: [
                    {
                        "imgid": "1",
                        "tag": "people",
                        "time": "2017-09-11T00:00:00Z",
                        "date": "2019-09-12",
                        "cameraid": "1",
                        "url": "test1"
                    }],
                pageIndex:'3',
                src1:'img1.jpg',
                src:'http://127.0.0.1:8000/api/url/get/1/'
            }
        },
        methods:{
            getList(){
                API.foreignList().then(res=>{
                    if(res.code){
                        alert(res.message);
                        return;
                    }
                    if (res.length>0){
                        let result = [];
                        res.forEach(item=>{
                            let cell = {};
                            let timeList = item.time.split("T");
                            cell = item
                            cell.date = timeList[0];
                            cell.time = timeList[1];
                            result.push(cell)
                        })
                        this.tableData = result
                    }
                    else {
                        this.tableData = res
                    }

                }).catch(msg => {
                    if(res.code){
                        alert(res.message);
                        return;
                    }
                    alert(msg)
                })
            },
            handleClick(item){
                console.log(item)
                this.$router.push({path: `/camera/`+item.cameraid+`/main`})
            },
            watchimg(item){

            },
            wkk(){

            },
            handleCurrentChange(item) {
                console.log(item)
                this.src=this.baseURL+'url/clear/'+item.imgid
            },

        },
        mounted() {
            this.getList()
        },
    }
    </script>

<style scoped>
    .outdiv{
        min-width: 1000px;
        overflow: hidden;
    }
    .titleClass{
        position: fixed;
        z-index: 1;
    }
    .card{
        float: left;
        /*position: fixed;*/
        margin-top: 70px;
        width: 50%;
        margin-left: 20px;
        /*left: 0;*/
        /*right: 0;*/

        overflow-y: auto;
        height: 100%;
    }
    .img-card{
        float: right;
        position: fixed;
        margin-top: 70px;
        right: 60px;
        width: 40%;
        height: auto;

    }

</style>
